<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <title>登录</title>
</head>
<body>
<div id="login">
    <section>
        <div class="title">
            <h2>穿云箭</h2>
        </div>
        <!--用户名-->
        <div>
            <input onclick="one(this)" type="email" id="1" placeholder="请输入账户名">
            <label for="1"></label>
        </div>
        <!--密码-->
        <div>
            <input onclick="two(this)" id="2" type="password" placeholder="请输入密码">
            <label for="2"></label>
        </div>
        <!--登录按钮-->
        <div>
            <button onclick="login()">登录</button>
        </div>
        <!--跳转链接-->
        <div>
            <span><a href="./html/forgotPassword.html">忘记密码?</a></span>
            <span><a href="./html/registerAccount.html">注册账户?</a></span>
        </div>
    </section>
</div>
<script>
    function login(){
        //跳转到内容首页
        window.location.href = './html/myHomePage.html';
    }
    var oneInput = document.getElementById('1');
    var twoInput = document.getElementById('2');
    window.onload = function () {
        oneInput.focus();
        console.log(document.hasFocus());
    }
    function one() {
        //twoInput.nextElementSibling 下一个兄弟元素
        if(oneInput == document.activeElement){
            console.log('获取焦点');
            twoInput.nextElementSibling.style.backgroundColor = '#ffffff';
            twoInput.nextElementSibling.style.width = '.1rem';
            oneInput.nextElementSibling.style.backgroundColor = '#ff740a';
            oneInput.nextElementSibling.style.width = '17rem';
            oneInput.nextElementSibling.style.transition='all 1s linear 0s';
        }
    }
    function two(){
        if(twoInput == document.activeElement){
            console.log('获取焦点');
            oneInput.nextElementSibling.style.backgroundColor = '#ffffff';
            oneInput.nextElementSibling.style.width = '.1rem';
            twoInput.nextElementSibling.style.backgroundColor = '#ff740a';
            twoInput.nextElementSibling.style.width = '17rem';
            twoInput.nextElementSibling.style.transition='all 1s linear 0s';
        }
    }


</script>
</body>
</html>